<template>
  <view>
    <uni-popup ref="commendRef" type="bottom" :maskClick="false">
      <view class="popup-container">
        <view class="body">
          <view class="tray_data">
            <uni-forms :modelValue="trayData">
              <uni-forms-item label="件号:" name="itemnumber">
                <input type="text" v-model="trayData.fspecification" disabled />
              </uni-forms-item>
              <uni-forms-item label="托盘:" name="fbillno">
                <input type="text" v-model="trayData.fbillno" disabled />
              </uni-forms-item>
              <uni-forms-item label="物料:" name="fmaterialname">
                <input type="text" v-model="trayData.fmaterialname" disabled />
              </uni-forms-item>
              <uni-forms-item label="批号:" name="flot">
                <input type="text" v-model="trayData.flot" disabled />
              </uni-forms-item>
              <uni-forms-item label="工单号:" name="foperpno">
                <input type="text" v-model="trayData.foperpno" disabled />
              </uni-forms-item>
            <uni-forms-item label="BO中物料:" name="isPpBm">
              <view class="tag-wrapper">
                <uni-tag
                  :text="trayData.isPpBom === true ? '是' : '否'"
                  size="mini"
                  :type="trayData.isPpBom === true ? 'success' : 'primary'"
                ></uni-tag>
              </view>
            </uni-forms-item>

              <uni-forms-item label="数量:" name="fqty">
                <uni-easyinput
                  type="number"
                  v-model="trayData.fqty"
                  @input="handleQuality(trayData)"
                />
              </uni-forms-item>
            </uni-forms>
          </view>

          <view class="footerPanel">
            <view class="footerPanel_body">
              <button @click="closeInfoPop" class="footerBtn concle">取消</button>
              <button @click="savePickMaterial" class="footerBtn save">
                提交
              </button>
            </view>
          </view>
        </view>
      </view>
    </uni-popup>

    <!-- 扫描仓位码后弹出领料界面 -->
    <add-pick ref="pickRef"></add-pick>
  </view>
</template>

<script>
import { pickMaterial, createPickDetailTemp } from "@/utils/api.js";
import AddPick from "@/pages/pop/add-pick-commend.vue";

export default {
  components: {
    AddPick,
  },
  data() {
    return {
      trayData: {}, //托盘信息
      trayCount: 0, //托盘数量
      planData: {}, //工序计划数据
      type: "",
    };
  },
  methods: {
    //数量校验，领料数量不能大于托盘数量
    handleQuality(e) {
      if (e.fqty > this.trayCount) {
        uni.showToast({
          title: "领料数量不能大于托盘数量",
          icon: "none",
        });
        this.$nextTick(() => {
          e.fqty = 0;
        });
      }
    },

    //进行领料
    savePickMaterial() {
      let _this = this;
      uni.showModal({
        title: "提示",
        content: "确认提交",
        success(res) {
          if (res.confirm) {
            createPickDetailTemp({
              type: _this.type,
              planData: _this.planData,
              trayData: _this.trayData,
            }).then((result) => {
              if (result.data.data) {
                uni.showToast({
                  title: "添加成功",
                  icon: "none",
                });
              }
              _this.$emit("success");
              _this.close();
            });
          }
        },
      });
    },

    updateFqty(e) {
      if (e.pickCount > e.FBASEQTY) {
        e.pickCount = e.FBASEQTY;
      }
    },

    closeInfoPop() {
      this.$refs.commendRef.close();
    },

    open(data) {
      this.trayData = data.trayData;
      this.trayCount = data.trayData.fqty;
      this.planData = data.header;
      this.type = data.type;
      this.$refs.commendRef.open("center");
    },

    close() {
      this.$refs.commendRef.close();
    },
  },
};
</script>

<style lang="scss">
.popup-container {
  display: flex;
  justify-content: center;
}

.body {
  background-color: aliceblue;
  width: 100vw;
  max-width: 600px;
  min-height: 70vh;
  padding: 20px 16px 100px;
  box-sizing: border-box;
  position: relative;
  margin: 0 auto;
  border-radius: 12px;
}
.tag-wrapper {
  display: flex;
  align-items: center;
  height: 100%;
}

.tray_data {
  margin-top: 8px;
  width: 100%;

  ::v-deep .uni-forms-item {
    margin-bottom: 8px !important;
    min-height: 36px !important;

    &__label {
      font-size: 18px !important;
      margin-bottom: 2px !important;
      white-space: nowrap;
      min-width: 90px !important;
      text-align: right;
    }

    &__content {
      flex: 1;
    }

    input,
    .uni-easyinput {
      font-size: 18px !important;
      width: 100% !important;
      box-sizing: border-box;
    }
  }

  ::v-deep .uni-tag {
    font-size: 18px !important;
    margin-left: 8px;
  }
}

.footerPanel {
  position: absolute;
  bottom: 20px;
  left: 0;
  width: 100%;

  .footerPanel_body {
    display: flex;
    justify-content: center;
    gap: 20px;
    padding: 0 20px;

    .footerBtn {
      height: 45px;
      min-width: 100px;
      padding: 0 16px;
      border-radius: 6px;
      font-size: 16px;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
      color: #fff;
      border: none;

      &.concle {
        background-color: #a0a0a0;
      }

      &.save {
        background-color: $uni-color-success;
      }
    }
  }
}
</style>
